<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面包屑导航</title>
    <style>
        .breadcrumb li{
             float: left;
             margin-left: 20px;
             list-style: none;

        }


         /**
          *   li+li  相邻兄弟选择器
          *  :before 伪元素
         **/
        .breadcrumb li+li:before{ /*after*/
             display: inline-block;
            content: "/";
        }

    </style>
</head>
<body>



<!--
      主页 /  人事管理 / 档案管理
-->

<ol class="breadcrumb">
    <li><a href="#">主页</a></li>
    <li>人事管理</li>
    <li>档案管理</li>
</ol>

</body>
</html>